<template>
  <div class="detailCss">
    <div class="topCss">
      <span>{{ detailPageStatusMap[detailPageType].title }}</span>
    </div>
    <div class="bodyCss">
      <el-form :model="form" ref="formRef" label-width="140px" :rules="rules" class="formCss">
        <template v-if="detailPageType === 'approve'">
          <div class="approveCss">
            <div class="approveTitleCss">
              企业信息
            </div>
            <div class="companyInfoCss">
              <div class="companyInfoItemCss">
                <div style="flex:1;">企业名称</div>
                <div style="flex:1;">{{ currentRow.enterpriseName }}</div>
              </div>
              <div class="companyInfoItemCss">
                <div style="flex:1;">社会信用代码</div>
                <div style="flex:1;">{{ currentRow.creditCode }}</div>
              </div>
            </div>
            <div class="approveTitleCss">
              相关证件
            </div>
            <div class="certLabelCss">* 营业执照照片</div>
            <div class="certImgCss">
              <div class="certImgItemCss">
                <image-preview :src="currentRow.businessLicense"  style="width: 100%; height: 100%" ></image-preview>
                <!-- <el-image style="width: 100%; height: 100%" :src="currentRow.businessLicense" :preview-src-list="[currentRow.businessLicense]"/> -->
              </div>
            </div>
            <template v-if="currentRow.sanitaryPermit && currentRow.type.indexOf('ggcs') >= 0">
              <div class="certLabelCss">* 卫生许可证</div>
              <div class="certImgCss">
                <div class="certImgItemCss">
                  <image-preview :src="currentRow.sanitaryPermit"  style="width: 100%; height: 100%" ></image-preview>
                  <!-- <el-image style="width: 100%; height: 100%" :src="currentRow.sanitaryPermit" :preview-src-list="[currentRow.sanitaryPermit]"/> -->
                </div>
              </div>
            </template>
            <template v-if="currentRow.sanitaryPermit && currentRow.type.indexOf('fsws') >= 0">
              <div class="certLabelCss">* 放射诊疗许可证</div>
              <div class="certImgCss">
                <div class="certImgItemCss">
                  <image-preview :src="currentRow.sanitaryPermit"  style="width: 100%; height: 100%" ></image-preview>
                  <!-- <el-image style="width: 100%; height: 100%" :src="currentRow.sanitaryPermit" :preview-src-list="[currentRow.sanitaryPermit]"/> -->
                </div>
              </div>
            </template>
            <div class="certLabelCss">* 法人姓名</div>
            <div>{{ currentRow.legalPerson }}</div>
            <div class="certLabelCss">* 法人身份证</div>
            <div class="certImgCss">
              <div class="certImgItemCss">
                <image-preview :src="currentRow.legalImgA"  style="width: 100%; height: 100%" ></image-preview>
                <!-- <el-image style="width: 100%; height: 100%" :src="currentRow.legalImgA" :preview-src-list="[currentRow.legalImgA, currentRow.legalImgB]" :initial-index="0"/> -->
              </div>
              <div class="certImgItemCss">
                <image-preview :src="currentRow.legalImgB"  style="width: 100%; height: 100%" ></image-preview>
                <!-- <el-image style="width: 100%; height: 100%" :src="currentRow.legalImgB" :preview-src-list="[currentRow.legalImgA, currentRow.legalImgB]" :initial-index="1"/> -->
              </div>
            </div>
          </div>
        </template>
      </el-form>
    </div>
    <div class="footerBtnCss">
      <el-button @click="goBackClickBtn">返回</el-button>
      <el-button type="primary" @click="approveClickBtn('pass')" :loading="approveLoading" v-if="currentRow.approvalStatus === '0'">审核成功</el-button>
      <el-button type="primary" @click="approveClickBtn('fail')" :loading="approveLoading" v-if="currentRow.approvalStatus === '0'">审核失败</el-button>
    </div>
  </div>
</template>

<script>
import { certificateApproveApi, submitEnterpriseCertificationAudit } from '@/api/zhangping/certificate'
import { getSelectOptionsFun, getCurrentDay } from '@/utils/business.js'
export default {
  props:{
    detailPageType:{
      type: String,
      default:()=> 'approve',
    },
    currentRow:{
      type: Object,
      default:{},
    },
  },
  data(){
    return{
      detailPageStatusMap:{
        approve:{
        title:'审核'
      },},
      form:{},
      rules:{

      },
      tableData:[],
      approveLoading:false,
    }
  },
  mounted(){
    if( this.detailPageType === 'productDetail'){
      this.getList()
    }
  },
  methods:{


    goBackClickBtn(){
      this.$emit('detailPageGoBack')
    },
    async approveClickBtn(type){
      try {
        this.approveLoading = true
        const approvalStatusQueryMap = {
          pass: '1',fail:'2'
        }
        const query = {
          certificateId: this.currentRow.certificateId,
          creditCode: this.currentRow.creditCode,
          stats: approvalStatusQueryMap[type]//string 审核状态 0 待审核, 1审核通过 2审核失败
        }
        const { code, msg } = await submitEnterpriseCertificationAudit(query)
        if( code === 200 ){
          this.$message({ message: msg, type: 'success' })
          this.goBackClickBtn()
        }
        this.approveLoading = false
      } catch (error) {
        console.log('error=>',error);
        this.approveLoading = false
      }
    },
  },
}
</script>

<style scoped lang="scss">
.detailCss{
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 23px 0;
  .topCss{
    height: 50px;
    font-weight: bold;
    text-align: center;
    padding: 0 20px;
  }
  .bodyCss{
    height: calc( 100% - 100px);
    padding: 0 20px;
    overflow-y: auto;
    .approveCss{
      position: relative;
      .approveTitleCss{
        color: #0099FF;
        font-weight: bold;
        font-size: 18px;
        padding-bottom: 14px;
        &:not(:first-child){
          margin-top: 30px;
        }
      }
      .companyInfoCss{
        background-color: #F6F8F9;
        padding: 20px;
        display: flex;
        flex-direction: column;
        row-gap: 20px;
        .companyInfoItemCss{
          text-align: left;
          display: flex;
        }
      }
      .certLabelCss{
        font-size: 14px;
        margin-bottom: 10px;
        &:not(:first-child){
          margin-top: 20px;
        }
      }
      .certImgCss{
        display: flex;
        column-gap: 20px;
        .certImgItemCss{
          height: 140px;
          width: 200px;
        }
      }
    }
  }
  .footerBtnCss{
    padding: 0 20px;
    padding-top: 14px;
    height: 50px;
    text-align: right;
  }
}
</style>
